<template>
    <div class="userinfo-container">
        <h1>我的信息</h1>
        <el-divider></el-divider>
        <el-form label-width="80px" class="order-form">
            <el-form-item label="头像">
                <el-avatar :size="size" :src="form.avatar" v-show="isUpdate" />
                <el-upload class="avatar-uploader" :headers="headerObj" :action="uploadUrl" cover
                    :on-success="handleAvatarSuccess" :show-file-list="false" v-show="!isUpdate">
                    <img v-if="form.avatar" :src="form.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input type="text" label="用户名" v-model="form.username" :disabled="isUpdate"></el-input>
            </el-form-item>
            <el-form-item label="住址">
                <el-input type="text" label="住址" v-model="form.address" :disabled="isUpdate"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input type="phone" label="联系方式" v-model="form.phone" :disabled="isUpdate"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input type="text" label="邮箱" v-model="form.email" :disabled="isUpdate"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="form.gender" :label="2" :disabled="isUpdate">保密</el-radio>
                <el-radio v-model="form.gender" :label="0" :disabled="isUpdate">男</el-radio>
                <el-radio v-model="form.gender" :label="1" :disabled="isUpdate">女</el-radio>
            </el-form-item>
            <el-form-item label="个人简介">
                <el-input type="textarea" placeholder="请输入内容" v-model="form.userDesc" :disabled="isUpdate">
                </el-input>
            </el-form-item>
            <el-form-item v-show="isUpdate">
                <el-button type="warning" @click="onUpdate">修改</el-button>
            </el-form-item>
            <el-form-item v-show="!isUpdate">
                <el-button type="warning" @click="onSubmit">保存</el-button>
                <el-button type="warning" @click="onCancel" plain>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
 
<script>
import { getUserDetail, updateUserInfo } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
    name: 'UserInfo',
    computed: {
        ...mapGetters([
            'uid',
            'userinfo',
            'token'
        ])
    },
    data() {
        return {
            form: {},
            isUpdate: true,
            uploadUrl: process.env.VUE_APP_BASE_API + '/travel/updateAttrBanner',
            headerObj: ''
        }
    },
    created() {
        this.getUserInfo()
        this.headerObj = {
            'token': this.token
        }
    },
    methods: {
        onUpdate() {
            this.isUpdate = false
        },
        onCancel() {
            this.isUpdate = true
        },
        async getUserInfo() {
            const res = await getUserDetail(this.userinfo.uid)
            if (res.code === 200) {
                const { user } = res.data
                this.form = user
                console.log(this.form)
            } else {
                console.log('查询失败')
            }
        },
        handleAvatarSuccess(res) {
            console.log(res)
            if (res.code === 200) {
                const { bannerUrl } = res.data
                this.form.avatar = bannerUrl
                console.log(this.form)
            } else {
                this.$message.error(res.message)
            }
        },
        async onSubmit() {
            const res = await updateUserInfo(this.form)
            console.log(res)
            if (res.code === 200) {
                this.$message.success('修改成功')
                this.isUpdate = true
            } 
            // else {
            //     this.$message.error(res.msg)
            // }

        }
    }
}
</script>
 
<style lang="less" scoped>
.userinfo-container {
    /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: goldenrod;
        background: goldenrod;

    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
        color: goldenrod;
    }

    .el-form {
        width: 400px;

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
            object-fit: cover;
        }
    }
}
</style>